<script setup lang='ts'>
import { getVideoDetail } from '@fl/api/anjutong/house-video'
import type { IVideoUpdate } from '@fl/api/anjutong/model/house-video-model'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { ElDialog, ElForm, ElFormItem } from 'element-plus'
import { nextTick, toRefs } from 'vue'
import { cloneDeep } from 'lodash-es'

const props = withDefaults(defineProps<{
    data?: any
    houseoptions?: any
    modelValue: boolean
}>(), {
    data: () => {},
})

const emits = defineEmits(['update:modelValue', 'confirm'])
const { data, modelValue, houseoptions } = toRefs(props)

const initialState = {
    videoLabel: '',
    videoCoverUrl: '',
    titleDescription: '',
    videoTitle: '',
    videoUrl: '',
    orderFlag: 0,
    realestateId: '',
}
const form = ref<IVideoUpdate>(cloneDeep(initialState))

const formRef = ref()

function close() {
    emits('update:modelValue', false)
}

async function init(val: any) {
    await nextTick()
    getVideoDetail(val.id).then((res: any) => {
        form.value = res.data
        form.value.realestateId = cloneDeep(houseoptions.value).reduce((pre: any, cur: any) => {
            if(cur.value === form.value.realestateId) {
                pre = cur.label
            }
            return pre
        }, '')
    })
}

watch(data, (val: any) => {
    if (val)
        init(val)
}, {
    deep: true,
    immediate: true,
})
</script>

<template>
    <ElDialog v-model="modelValue"
              width="600"
              title="详情"
              @close="close"
    >
        <ElForm ref="formRef"
                :model="form"
                label-width="auto"
                style="max-width: 500px"
        >
            <ElFormItem label="视频标题:"
                        prop="videoTitle"
            >
                {{ form.videoTitle }}
            </ElFormItem>

            <ElFormItem label="视频说明:"
                        prop="titleDescription"
            >
                {{ form.titleDescription }}
            </ElFormItem>

            <ElFormItem label="关联楼盘:"
                        prop="realestateId"
            >
                {{ form.realestateId }}
            </ElFormItem>

            <ElFormItem label="视频标签:">
                <el-tag v-if="form.videoLabel" type="success">{{ form.videoLabel }}</el-tag>
                <span v-else></span>
            </ElFormItem>

            <ElFormItem label="排序:"
                        prop="orderFlag"
            >
                {{ form.orderFlag }}
            </ElFormItem>

            <ElFormItem label="视频上传:"
                        prop="videoUrl"
            >
                <UpdatedOss v-model="form.videoUrl"
                            :is-video="true"
                            :disabled="true"
                />
            </ElFormItem>

            <ElRow>
                <ElCol :span="12">
                    <ElFormItem label="视频封面:">
                        <UpdatedOss v-model="form.videoCoverUrl"
                                    :disabled="true"
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>
        </ElForm>
    </ElDialog>
</template>

<style lang="scss" scoped>
:deep(.el-upload-list__item div) {
    width: 100%;
    video {
        width: 100%;
    }
}
</style>